<template>
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="内容:">
            <el-input type="textarea" v-model="form.content" placeholder="说点什么吧."></el-input>
        </el-form-item>
        <el-form-item>
            <el-upload action="http://localhost:9999/files/uploadFile" list-type="picture-card" :file-list="fileList"
                :on-preview="handlePictureCardPreview" :auto-upload="true" :multiple="true" :on-success="uploadSuccess"
                :on-error="uploadError" :on-change="changeFile" :on-exceed="exceedFile" :limit="1">
                <!-- <img v-if="form.img" :src="form.img"/> -->
                <el-icon class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
            <!-- <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog> -->
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即发布</el-button>
            <el-button @click="sendShow2">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import { newBlogService } from '@/api/blog'
import { ElMessage } from 'element-plus'

export default {
    name: "FormComponent",
    data() {
        return {
            fileList: [],

            form: {
                content: '',
                img: ''
            },
            dialogImageUrl: '',
            dialogVisible: false
        }
    },
    methods: {
        async onSubmit() {
            await newBlogService(this.form)
            ElMessage.success("发布成功")
            this.form.content = ''
            this.form.img = ''
            this.$emit('setShow')
            // this.$router.push("/discussView")
            window.location.reload()
        },
        uploadSuccess(response) {
            // console.log(response)
            // console.log(1111111111111)
            this.form.img = response.data
        },
        uploadError(err) {
            console.log(err)
        },
        changeFile(file, fileList) {
            this.fileList = fileList
            // console.log(fileList)
        },
        exceedFile() {
            alert('最多上传1张照片')
        },
        sendShow2() {
            this.$emit('setShow')
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    }
}
</script>

<style scoped></style>